<template>
  <div>
    <h3>用户列表</h3>
    <!--分割线-->
    <el-divider></el-divider>
    <!-- 卡片视图区 -->

    <el-card class="box-card">
      <!-- 搜索与添加 -->
      <el-input
          v-model="key"
          prefix-icon="el-icon-search"
          placeholder="输入用户名进行搜索"
          style="width: 30%"/>
      <!-- 用户列表区域 -->
      <el-table :data="userList.filter(data =>  data.username.toLowerCase().includes(key.toLowerCase()))" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="用户名" prop="username" width="100"></el-table-column>
        <el-table-column label="昵称" prop="nickname" width="100"></el-table-column>
        <el-table-column label="性别" prop="gender" width="50"></el-table-column>
        <el-table-column label="出生日期" prop="birthday" width="120"></el-table-column>
        <el-table-column label="手机号" prop="phone" width="150"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="用户地址" prop="address"></el-table-column>
<!--        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
          </template>
        </el-table-column>-->
      </el-table>

    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      key:'',
      // 获取用户列表参数对象
      queryInfo: {
        query: '',
        page:1,
        pageSize: 10
      },
      userList:[{
        username:'老大',
        nickname: '熊大',
        gender:'雄性',
        phone:'111111',
        address:'狗熊岭'
      },
        {
          username:'二货',
          nickname: '2B',
          gender:'雄性',
          phone:'222222',
          address:'精神院'
        },
        {
          username:'小三',
          nickname: '秀儿',
          gender:'雌性',
          phone:'333333',
          address:'老王隔壁'
        }],
      total: 0
    }
  },
  created() {
    let url = 'http://localhost:8080/users/list?page='+this.queryInfo.page+'&pageSize='+this.queryInfo.pageSize
    axios.get(url).then((response) => {
      let json = response.data
      if (json.state==20000) {
        console.log(json.data)
        this.userList = json.data.list
      }
    })
  },
  methods: {
    /*async getUserList() {
      const { data:res } = await this.$http.get('users',{ params: this.queryInfo })
      if (res.meta.status !==200 ){
        return this.$message.error('获取用户列表失败!')
      }
      this.userlist = res.data.users
      this.total = res.data.total
      console.log(res)
    }*/
  }
}
</script>

<style scoped>

</style>